<!-- 车辆管理 -->
 <template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="carList">
      <div class="header">
        <el-form :model="params" :inline="true" ref="resetForm" class="demo-form-inline">
          <el-form-item label="车辆类型">
            <el-select
              v-model="params.truckTypeId"
              placeholder="请选择"
              style="margin-top: 30px"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号码" prop="licensePlate">
            <el-input
              v-model="params.licensePlate"
              placeholder="请输入车牌号码"
              style="margin-top: 30px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="margin-top: 30px; background-color: #e15536; color: #fff"
              @click="doSearch"
              >搜索</el-button
            >
            <el-button type="primary" style="margin-top: 30px" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="tab">
        <el-tabs type="border-card">
          <el-tab-pane label="全部">
            <div class="tab-button">
              <el-button
                style="background-color: #e15536; width: 100px"
                type="danger"
                @click="addForm"
                >新增车辆</el-button
              >
            </div>
            <div class="tab-table">
              <el-table :data="trucklist" style="width: 100%">
                <el-table-column prop="date" label="序号" type="index">
                </el-table-column>
                <el-table-column prop="licensePlate" label="车牌号码">
                </el-table-column>
                <el-table-column prop="truckTypeName" label="车辆类型">
                </el-table-column>
                <el-table-column prop="driverNum" label="司机数量">
                </el-table-column>
                <el-table-column prop="workStatus" label="车辆状态">
                </el-table-column>
                <el-table-column prop="deviceGpsId" label="GPS设备ID">
                </el-table-column>
                <el-table-column prop="allowableLoad" label="实载重量(T)">
                </el-table-column>
                <el-table-column prop="allowableVolume" label="实载体积(方)">
                </el-table-column>
                <el-table-column label="操作">
                <template #default="scope">
                 <el-button type="text" @click="detail(scope.row.id)">查看详情</el-button>
                  <el-button type="text">启用</el-button>
                  <el-button type="text">配置司机</el-button>
               </template>
                </el-table-column>
              </el-table>
              <el-pagination
                :page-sizes="[10, 20, 30, 40]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                @current-change="pageChange"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="可用">可用</el-tab-pane>
          <el-tab-pane label="停用">停用</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 新增车辆的弹框 -->
    <el-dialog title="新增车辆" :visible.sync="dialogFormVisible">
      <el-form ref="addForm" :model="formAdd" :rules="rulesAdd">
        <el-form-item label="车辆类型" prop="truckTypeId">
          <el-select
            v-model="formAdd.truckTypeId"
            placeholder="请选择"
            style="width: 598.89px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="车牌号码"
          :label-width="formLabelWidth"
          prop="licensePlate"
        >
          <el-input
            v-model="formAdd.licensePlate"
            placeholder="请输入车牌号码"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="GPS设备ID"
          :label-width="formLabelWidth"
          prop="deviceGpsId"
        >
          <el-input
            v-model="formAdd.deviceGpsId"
            placeholder="请输入GPS设备ID"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { truckList, getCarTypeList, truckTypeAdd } from '@/api/transit'
export default {
  name: 'Vehicle',
  data() {
    return {
      // 分页数据列表参数
      value: '',
      form: {
        truckTypeName: '',
        licensePlate: ''
      },
      params: {
        page: 1,
        pageSize: 10,
        licensePlate: '',
        truckTypeId: '',
        workStatus: ''
      },
      counts: 0,
      // 车辆分页数据列表
      trucklist: [],
      // 车辆类型下拉列表
      typeList: [],
      // 控制对话打开和关闭
      dialogFormVisible: false,
      dialogTableVisible: false,
      formAdd: {
        licensePlate: '',
        deviceGpsId: '',
        truckTypeId: ''
      },
      rulesAdd: {
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }
        ],
        truckTypeId: [
          { required: true, message: '请输入车辆类型', trigger: 'change' }
        ]
      },
      formLabelWidth: '120px',
      AddForm: {
        truckTypeId: '',
        licensePlate: '',
        deviceGpsId: '',
        truckTypeName: '',
        allowableLoad: '',
        allowableVolume: ''
      }
    }
  },
  mounted() {
    // 调用分页数据列表函数
    this.truckListFn()
    // 调用车辆类型下拉列表函数
    this.CarTypeList()
  },
  methods: {
    async truckListFn() {
      const res = await truckList(this.params)
      console.log(res, '车辆分页数据')
      this.trucklist = res.data.items
      this.counts = Number(res.data.counts)
    },
    // 点击页数，能够转换页数
    pageChange(page) {
      this.params.page = page
      this.truckListFn()
    },
    // 车辆类型下拉列表
    async CarTypeList() {
      const res = await getCarTypeList()
      console.log(res, '车辆类型下拉列表')
      this.typeList = res.data
    },
    // 搜索函数
    doSearch() {
      console.log(111)
      this.params.page = 1
      this.truckListFn()
    },
    // 重置
    reset() {
      console.log(111)
      this.$refs.resetForm.resetFields()
      this.truckListFn()
    },
    // 添加表单的控制弹框
    addForm() {
      this.dialogFormVisible = true
    },

    confirmAdd() {
      this.$refs.addForm.validate( async valid => {
        if(valid) {
        const res = await truckTypeAdd(this.AddForm)
        console.log(res, '增加车辆');
        this.truckListFn()
        this.dialogFormVisible = false
        }
      })
    },
    detail(id) {
      console.log(id);
      this.$router.push({
        path: 'vehicle-detail',
        query: {
          id
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.carList {
  width: 100%;
  height: 100%;
  // background-color: black;
  padding: 20px 20px 100px 20px;
}
.header {
  display: flex;
  line-height: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 20px;
}
.header .el-form {
  display: flex;
  width: 100%;
}
.tab-button {
  margin-top: 20px;
}
.tab-table {
  margin-top: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style>
.startconfirm {
  width: 481px;
}
.startconfirm .el-message-box__header {
  padding-bottom: 4px;
}
.startconfirm .el-message-box__container {
  margin-bottom: 15px;
}
.confirm .el-message-box__status.el-icon-warning {
  left: 70px;
}
.confirm.el-message-box__title {
  font-size: 16px;
}
.confirm .el-message-box__message p {
  color: #f92d2d;
  margin-top: 5px;
}
.confirm .el-message-box__btns {
  text-align: center;
  margin-top: 10px;
}
</style>
